<template>
  <div class="shouye">
    <header>
      <input type="text" placeholder="输入商家/商品名称" @click="tiao" />
    </header>
    <main>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in picList" :key="index"
          ><img :src="item.bannerUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 排序 -->
      <h4 style="margin-top: 10px; margin-left: 10px">猜你喜欢</h4>
      <div class="paixu">
        <span
          v-for="(item, index) in paixuArr"
          :key="index"
          @click="qiehuan(index)"
          :class="{ active: curreIndex == index }"
        >
          {{ item }}
        </span>
      </div>
      <!-- 店铺列表 -->
      <div
        @click="toDetail(item)"
        class="shopping"
        v-for="(item, index) in shoppingArr"
        :key="index"
      >
        <div class="left">
          <div class="img">
            <img :src="item.picUrl" alt="" />
          </div>
        </div>

        <div class="right">
          <div class="text">
            <h3>{{ item.name }}</h3>
            <span>{{ item.minPriceTip }}</span>
            <span>{{ item.minPriceTip }}</span>
            <span>{{ item.deliveryTimeTip }}</span>
            <span>{{ item.distance }}</span>
            <span>{{ item.wmPoiScore }}</span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { shop_list, banner_list } from "../../axios/api";
export default {
  data() {
    return {
      curreIndex: 0,
      paixuArr: ["综合排序", "距离最近", "销量最高", "筛选"],
      shoppingArr: [],
      picList: [],
    };
  },

  methods: {
    qiehuan(index) {
      if (index == 1) {
        this.shoppingArr.sort((a, b) => {
          return a.wmPoiScore - b.wmPoiScore;
        });
      }
      if (index == 2) {
        this.shoppingArr.sort((a, b) => {
          return b.wmPoiScore - a.wmPoiScore;
        });
      }
      if (index == 3) {
        this.shoppingArr.sort((a, b) => {
          return a.wmPoiScore - b.wmPoiScore;
        });
      }
    },
    toDetail(item) {
      //跳转到详情页
      this.$router.push("/detail/" + item.mtWmPoiId);
    },
    tiao() {
      this.$router.push("/search");
    },
  },
  mounted() {
    //商品列表
    shop_list().then((res) => {
      // console.log(res.data);
      this.shoppingArr = res.data.list;
    });
    //轮播图
    banner_list().then((res) => {
      // console.log(res.data);
      this.picList = res.data.list;
    });
  },
};
</script>
<style lang='scss' scoped>
.shouye {
  width: 100%;
  height: 100%;
}
.my-swipe img {
  width: 95%;
  height: 150px;
  display: block;
  padding: 10px;
  border-radius: 20px;
}

main {
  width: 100%;
  height: 100%;

  .shopping {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 30%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .img {
        width: 80%;
        height: 80%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .right {
      width: 70%;
      height: 100%;
      .text {
        width: 100%;
        height: 50px;

        margin-top: 15px;
      }

      span {
        padding-left: 15px;
      }
    }
  }

  .paixu {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .active {
      color: deepskyblue;
    }
  }

  .ban {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner {
    width: 95%;
    height: 110px;
    margin-top: 20px;
    border-radius: 30px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
    }
  }
}
header {
  width: 100%;
  height: 70px;
  background-color: deepskyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  input {
    width: 80%;
    height: 40px;
    text-align: center;
    color: gray;
    border: none;
    border-radius: 25px;
  }
}
</style>